<template>
  <el-card class='main-card'>
    <div class='title'>{{ this.$route.name }}</div>
    <div class='apply-status-menu'>
      <span>状态</span>
      <span @click="changeStatus('no')" :class="isActive('no')">未审核</span>
      <span @click="changeStatus('yes')" :class="isActive('yes')">已通过</span>
      <span @click="changeStatus('reject')" :class="isActive('reject')">已拒绝</span>
    </div>
    <div class='operation-container'>
      <el-button
        type='danger'
        size='small'
        icon='el-icon-delete'
        :disabled='applyIds.length === 0'
        @click='updateIsDelete = true'>
        批量删除
      </el-button>
      <div style='margin-left: auto'>
        <el-input
          clearable
          v-model='keywords'
          prefix-icon='el-icon-search'
          size='small'
          placeholder='请输入友链名称'
          style='width: 200px;'
          @change='searchApply' />
        <el-button type='primary' size='small' icon='el-icon-search' style='margin-left: 1rem' @click='searchApply'>
          搜索
        </el-button>
      </div>
    </div>
    <el-table
      :data='applyList'
      border
      style='width: 100%'
      @selection-change='handleSelectionChange'>
      <el-table-column fixed type='selection' width='50' align='center'></el-table-column>
      <el-table-column prop='id' label='申请ID' width='80' align='center'></el-table-column>
      <el-table-column label='友链头像' align='center' width='100'>
        <template slot-scope='scope'>
          <img width='60' height='60' style='border-radius: 50%'
               :src="scope.row.applyAvatar"
               alt='avatar' @error='handleErrorAvatarNew($event,String(scope.row.applyName).charAt(0))'/>
        </template>
      </el-table-column>
      <el-table-column prop='applyName' label='友链名称' align='center' width='100'></el-table-column>
      <el-table-column prop='applyEmail' label='申请邮箱' align='center' width='180'></el-table-column>
      <el-table-column prop='applyAddress' label='友链地址' align='center' width='200'></el-table-column>
      <el-table-column prop='applyIntro' label='友链简介' align='center' width='180'
                       show-overflow-tooltip></el-table-column>
      <el-table-column prop='applyScreenshot' label='友链封面' align='center' width='180'>
        <template slot-scope='scope'>
          <img v-if='scope.row.applyScreenshot' class='apply-cover'
                    :src='scope.row.applyScreenshot'  alt='apply-cover' @error='handleErrorSc'/>
          <img v-else class='apply-cover' src='@/assets/images/emp.png' alt='apply-cover'>
        </template>
      </el-table-column>
      <el-table-column prop='applyType' label='申请类型' align='center' width='100'></el-table-column>
      <el-table-column prop='applyStatus' label='审核状态' align='center' width='100'>
        <template slot-scope='scope'>
          <el-tag v-if='scope.row.applyStatus===0'>未审核</el-tag>
          <el-tag v-if='scope.row.applyStatus===1' type='success'>已通过</el-tag>
          <el-tag v-if='scope.row.applyStatus===2' type='danger'>已拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop='date' label='申请时间' align='center' width='200'></el-table-column>
      <el-table-column fixed='right' label='操作' width='200' align='center' v-if='this.applyStatus === 0'>
        <template slot-scope='scope'>
          <el-button @click='openModel(scope.row)' type='success' plain size='small'>
            审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class='pagination-container'
      background
      @size-change='sizeChange'
      @current-change='currentChange'
      :current-page='current'
      :page-size='size'
      :total='count'
      :page-sizes='[5, 10, 20]'
      layout='total, sizes, prev, pager, next, jumper' />
    <el-dialog :visible.sync='updateIsDelete' width='30%'>
      <div class='dialog-title-container' slot='title'><i class='el-icon-warning' style='color: #ff9900' />提示</div>
      <div style='font-size: 1rem'>是否彻底删除选中项？</div>
      <div slot='footer'>
        <el-button @click='updateIsDelete = false'>取 消</el-button>
        <el-button type='primary' @click='deleteApply(null)'> 确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync='addOrEdit' width='50%' top='20vh' title='审核申请' center>
      <el-form label-width='80px' size='medium'>
        <el-form-item label='审核详情'>
          <el-input type="textarea" v-model="applyDesc" :rows='5' placeholder='审核详情(必填)'></el-input>
          <div class='tips'>
            <span>
              拒绝：
              <em>首先感谢您对本站的认可！但可能贵站的内容或风格不太适合本站相关的友链规则，请见谅，后会有期！</em>
            </span>
            <span>
              同意：
              <em>能遇到的同路人，哪怕只是陪伴一段时间，也都是赚到的。每个出现过的人，无论结局如何，我都心存感激！</em>
            </span>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="passApply">同意</el-button>
          <el-button type="danger" @click='rejectApply'>拒绝</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
import { handleErrorAvatarNew } from '@/util/cravatarUtil'

export default {
  name: 'ApplyList',
  created() {
    this.listApply()
  },
  data() {
    return {
      activeStatus: 'no',
      applyList: [],
      applyStatus: 0,
      applyDesc: '',
      applyIds: [],
      updateIsDelete: false,
      current: 1,
      size: 10,
      count: 0,
      keywords: null,
      addOrEdit: false,
    }
  },
  methods: {
    handleErrorAvatarNew,
    handleErrorImg(event) {
      const imgError = event.target
      imgError.src= require('@/assets/images/cravatar.png')
    },
    handleErrorSc(event) {
      const imgError = event.target
      imgError.src= require('@/assets/images/empty.png')
    },
    changeStatus(status) {
      switch (status) {
        case 'no':
          this.applyStatus = 0
          break
        case 'yes':
          this.applyStatus = 1
          break
        case 'reject':
          this.applyStatus = 2
          break
      }
      this.current = 1
      this.activeStatus = status
    },
    handleSelectionChange(apply) {
      this.applyIds = []
      apply.forEach((item) => {
        this.applyIds.push(item.id)
      })
    },
    openModel(apply){
      this.addOrEdit = true
      sessionStorage.setItem('apply_id', apply.id)
    },
    passApply() {
      this.axios.put('/api/admin/link/apply/manage', {
        id: sessionStorage.getItem('apply_id'),
        applyStatus: 1,
        applyDesc: this.applyDesc
      }).then(({ data }) => {
        if (data.flag) {
          this.$notify.success({
            title: '成功',
            message: '已通过'
          })
          this.addOrEdit = false
          this.listApply()
          sessionStorage.removeItem('apply_id')
        } else {
          this.$notify.error({
            title: '失败',
            message: data.message
          })
        }
      })
    },
    rejectApply() {
      this.axios.put('/api/admin/link/apply/manage', {
        id: sessionStorage.getItem('apply_id'),
        applyStatus: 2,
        applyDesc: this.applyDesc
      }).then(({ data }) => {
        if (data.flag) {
          this.$notify.success({
            title: '成功',
            message: '已拒绝'
          })
          this.addOrEdit = false
          this.listApply()
          sessionStorage.removeItem('apply_id')
        } else {
          this.$notify.error({
            title: '失败',
            message: data.message
          })
        }
      })
    },
    searchApply() {
      this.current = 1
      this.listApply()
    },
    sizeChange(size) {
      this.size = size
      this.listApply()
    },
    currentChange(current) {
      this.current = current
      this.$store.commit('updateApplyListPageState', current)
      this.listApply()
    },
    listApply() {
      this.axios
        .get('/api/admin/link/apply/list', {
          params: {
            current: this.current,
            size: this.size,
            keywords: this.keywords,
            applyStatus: this.applyStatus
          }
        }).then(({ data }) => {
        this.applyList = data.data.records
        this.count = data.data.count
      })
    },
    deleteApply(id) {
      let param = {}
      if (id == null) {
        param = { data: this.applyIds }
      } else {
        param = { data: [id] }
      }
      this.axios.delete('/api/admin/link/apply/delete', param).then(({ data }) => {
        if (data.flag) {
          this.$notify.success({
            title: '成功',
            message: data.message
          })
          this.listBooks()
        } else {
          this.$notify.error({
            title: '失败',
            message: data.message
          })
        }
      })
      this.updateIsDelete = false
      this.listApply()
    }
  },
  computed: {
    isActive() {
      return function(status) {
        return this.activeStatus === status ? 'active-status' : 'status'
      }
    }
  },
  watch: {
    applyStatus() {
      this.current = 1
      this.listApply()
    }
  }
}
</script>

<style scoped>
.apply-status-menu {
    font-size: 14px;
    margin-top: 40px;
    color: #999;
}

.apply-status-menu span {
    margin-right: 24px;
}

.status {
    cursor: pointer;
}

.active-status {
    cursor: pointer;
    color: #333;
    font-weight: bold;
}

.apply-cover {
    position: relative;
    width: 100%;
    height: 90px;
    border-radius: 4px;
}

.apply-cover::after {
    content: '';
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.tips{
    display: flex;
    flex-direction: column;
}
.tips span{
    display: inline-flex;
    align-items: center;
}
.tips em{
    font-style: normal;
    color: rgb(238 77 80);
    margin: .5em;
    font-size: .75rem;
    vertical-align: middle;
    line-height: 2;
    display: inline-block;
}
</style>
